<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            display: flex;
            flex-direction: row;
        }
        .top{
            flex-grow:3
        }
        .content{
            flex-grow:7
        }
    </style>
    <script>
        function doPage(pageNo) {
            document.forms[0].current.value = pageNo;
            document.forms[0].submit();
        }
    </script>
</head>
<body>
<div class="box">

    <div class="content">
        <a th:href="@{/users/add}">添加</a>
        <form th:action="@{/users}">
            <input type="hidden" name="current">
            account:<input name="account" th:value="${user.account}"><br>
            realName:<input name="realName" th:value="${user.realName}"><br>
            <input type="submit" value="查询">
            <table>
                <tr>
                    <td>ID</td>
                    <td>ACCOUNT</td>
                    <td>REALNAME</td>
                    <td>BIRTHDAY</td>
                    <td>角色</td>
                    <td>OPT</td>
                </tr>
                <tr th:each="item:${page.records}">
                    <td th:text="${item.id}">ID</td>
                    <td th:text="${item.account}">ACCOUNT</td>
                    <td th:text="${item.realName}">REALNAME</td>
                    <td th:text="${item.birthday}">BIRTHDAY</td>
                    <td th:text="${item.roleId}">roleId</td>
                    <td>
                        <a th:href="@{/users/del(id=${item.id})}">删除</a>
                        <a th:href="@{/users/update(id=${item.id})}">修改</a>
                        <a th:href="@{/users/view(id=${item.id})}">详情</a>
                    </td>
                </tr>
            </table>
            <div>
                当前<span th:text="${page.current}">1</span>页，
                共<span th:text="${page.total}">10</span>条，
                共<span th:text="${page.pages}">5</span>页，每页<span th:text="${page.size}">2</span>条
            </div>
            <div>
                <span th:if="${page.current < 1}">上页</span>
                <a th:if="${page.current > 1}" href="javascript:void(0)" th:onclick="doPage([[${page.current - 1}]])">上页</a>
                <a th:if="${page.current < page.pages}" href="javascript:void(0)" th:onclick="doPage([[${page.current + 1}]])">下页</a>
                <span th:if="${page.current > page.pages}">下页</span>
            </div>
        </form>
    </div>

    <div class="top">
        <table>
            <tr>
                <td>名字</td>
                <td>次数</td>
            </tr>
            <tr th:each="item:${scores}">
                <td th:text="${item.value}">名字</td>
                <td th:text="${item.score}">次数</td>
            </tr>
        </table>
    </div>
</div>

</body>
</html>